<template>
    <div class="about">
        <el-card class="about-card">
            <h1>关于PMall积分商城</h1>
            <p>这是一个基于Vue 3 + TypeScript + Element Plus构建的现代化积分商城项目。</p>

            <div class="features">
                <h2>主要特性</h2>
                <el-row :gutter="20">
                    <el-col :xs="24" :sm="12" :md="8" v-for="feature in features" :key="feature.title">
                        <el-card class="feature-card" shadow="hover">
                            <div class="feature-icon">
                                <el-icon :size="40">
                                    <component :is="feature.icon" />
                                </el-icon>
                            </div>
                            <h3>{{ feature.title }}</h3>
                            <p>{{ feature.description }}</p>
                        </el-card>
                    </el-col>
                </el-row>
            </div>

            <div class="tech-stack">
                <h2>技术栈</h2>
                <el-row :gutter="20">
                    <el-col :xs="12" :sm="8" :md="6" v-for="tech in techStack" :key="tech.name">
                        <div class="tech-item">
                            <div class="tech-icon">{{ tech.icon }}</div>
                            <div class="tech-name">{{ tech.name }}</div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import {
    ShoppingCart,
    User,
    Star,
    Document,
    Location,
    Setting,
    Monitor
} from '@element-plus/icons-vue'

const features = [
    {
        title: '用户管理',
        description: '完整的用户注册、登录、信息管理功能',
        icon: 'User'
    },
    {
        title: '商品展示',
        description: '丰富的商品展示和搜索功能',
        icon: 'ShoppingCart'
    },
    {
        title: '积分系统',
        description: '完善的积分获取、消费和管理系统',
        icon: 'Star'
    },
    {
        title: '订单管理',
        description: '完整的订单创建、支付、状态跟踪',
        icon: 'Document'
    },
    {
        title: '地址管理',
        description: '收货地址的增删改查功能',
        icon: 'Location'
    },
    {
        title: '系统设置',
        description: '灵活的系统配置和管理功能',
        icon: 'Setting'
    }
]

const techStack = [
    { name: 'Vue 3', icon: 'V' },
    { name: 'TypeScript', icon: 'TS' },
    { name: 'Element Plus', icon: 'E' },
    { name: 'Pinia', icon: 'P' },
    { name: 'Vue Router', icon: 'R' },
    { name: 'Axios', icon: 'A' },
    { name: 'Vite', icon: 'V' },
    { name: 'ESLint', icon: 'E' }
]
</script>

<style scoped>
.about {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.about-card {
    padding: 40px;
}

.about-card h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: 32px;
    font-weight: 600;
}

.about-card>p {
    text-align: center;
    color: #666;
    font-size: 16px;
    margin-bottom: 40px;
}

.features {
    margin: 40px 0;
}

.features h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: 600;
}

.feature-card {
    text-align: center;
    margin-bottom: 20px;
    transition: transform 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-icon {
    margin-bottom: 15px;
    color: #409eff;
}

.feature-card h3 {
    color: #333;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
}

.feature-card p {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

.tech-stack {
    margin: 40px 0;
}

.tech-stack h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: 600;
}

.tech-item {
    text-align: center;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 8px;
    background: #f8f9fa;
    transition: background-color 0.3s;
}

.tech-item:hover {
    background: #e9ecef;
}

.tech-icon {
    font-size: 24px;
    font-weight: bold;
    color: #409eff;
    margin-bottom: 10px;
}

.tech-name {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .about {
        padding: 10px;
    }

    .about-card {
        padding: 20px;
    }

    .about-card h1 {
        font-size: 24px;
    }

    .features h2,
    .tech-stack h2 {
        font-size: 20px;
    }
}
</style>
